<template>
    <el-upload class="avatar-uploader" :action="uploadUrl" :before-upload="beforeUpload" :on-success="handleSuccess" :show-file-list="false" list-type="picture" :limit="limit">
        <img v-if="imageUrl" :src="asset(imageUrl)" class="avatar" :style="{height: height}" />
        <i v-else class="el-icon-plus avatar-uploader-icon" :style="{lineHeight: height_str}"></i>
    </el-upload>
</template>

<script>
import { compressAccurately } from 'image-conversion'
import { asset } from '@/utils/url'

export default {
    name: 'ImageThumbUpload',
    props: {
        // eslint-disable-next-line vue/require-default-prop
        imageUrl: String,
        // eslint-disable-next-line vue/require-default-prop
        h2wratio: Number,
        // eslint-disable-next-line vue/require-default-prop
        field: String,
        // eslint-disable-next-line vue/require-default-prop
        limit: Number
    },
    data() {
        return {
            uploadUrl: [process.env.VUE_APP_BASE_API] + `/product/upload/image`,
            height: 178,
            height_str: '178px'
        }
    },
    created() {
        if (this.h2wratio > 0) {
            this.height = 178 * this.h2wratio
            this.height_str = 178 * this.h2wratio + 'px'
        }
    },
    methods: {
        asset(url) {
            return asset(url)
        },
        // 第一种,不考虑图片长宽,只考虑图片大小的情况,图片超过4M就压缩
        beforeUpload(file) {
            return new Promise((resolve, reject) => {
                const isLt2M = file.size / 1024 / 1024 < 0.4 // 判定图片大小是否小于4MB
                if (isLt2M) {
                    resolve(file)
                }
                compressAccurately(file, 400).then(res => {
                    resolve(res)
                }).catch(err => {
                    console.log(err)
                })
            })
        },
        // 第二种,图片大小超过4M,长度超过2000就压缩
        beforeUpload2(file) { // 图片不大于4m,宽度不大于2000
            return new Promise((resolve, reject) => {
                const _URL = window.URL || window.webkitURL
                const isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
                // 这里需要计算出图片的长宽
                const img = new Image()
                img.onload = function () {
                    file.width = img.width // 获取到width放在了file属性上
                    file.height = img.height // 获取到height放在了file属性上
                    const valid = img.width > 2000 // 图片宽度大于2000
                    // console.log(11, file)
                    // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
                    if (valid || isLt2M) {
                        compressAccurately(file, {
                            size: 400,
                            width: 2000
                        }).then(res => { // console.log(33, res)
                            resolve(res)
                        })
                    } else resolve(file)
                } // 需要把图片赋值
                img.src = _URL.createObjectURL(file)
            })
        },
        handleSuccess(response, file, fileList) {
            this.emitFile(response.data.file_name)
        },
        emitFile(file_name) {
            this.$emit('fileChange', { field: this.field, file_name: file_name })
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    display: block;
}
</style>
